<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          placeholder="借款客户"
          @keyup.enter.native="getData()"
          @clear="getData()"
          clearable
          v-model="params.customer_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="客户类型"
          clearable
          number-key
          :options="enumCustomerType"
          v-model="params['org_class.eq']"
          @change="getData()"
        ></c-select>
      </el-form-item>

      <el-form-item>
        <select-date-cascader
          placeholder="放款时间"
          class="form-control-ml"
          v-model="pickDateLoad"
          @select="handleDateLoadChange"
        ></select-date-cascader>
      </el-form-item>
      <el-form-item>
        <select-date-cascader
          placeholder="到期时间"
          class="form-control-ml"
          v-model="pickDateLoadEnd"
          @select="handleDateLoadEndChange"
        ></select-date-cascader>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="项目状态"
          clearable
          number-key
          :options="enumPeriodStatus"
          v-model="params['approval_status.eq']"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportExcel('项目信息')"
        >
          导出
        </el-button>
      </el-form-item>

      <el-form-item class="float-right">
        <el-button class="btn-long" type="primary" @click="onPeriodList" icon="el-icon-plus">
          展期（延期）
        </el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <period-select-list
      :visible.sync="periodListVisible"
      @success="getData()"
      :channel-type="channelType"
      :is-rural-dev="isRuralDev"
    ></period-select-list>

    <period-edit-dialog
      :visible.sync="editVisible"
      :form-data="formData"
      @success="getData()"
    ></period-edit-dialog>

    <period-upload-confirm
      :visible.sync="attachVisible"
      :form-data="attachData"
      @success="getData()"
    ></period-upload-confirm>

    <period-view-dialog :visible.sync="viewVisible" :form-data="viewData"></period-view-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  enumPeriodStatusStyle,
  enumCustomerType,
  dataAdapter,
  parseCascaderDate,
  enumPeriodStatus,
} from '@/bank/views/limit/index'

import hndTableMixin from '@/bank/views/business/limit/history/mixins'

import SelectDateCascader from '@/components/select/SelectDateCascader'
import PeriodSelectList from '@/bank/views/business/limit/history/postloan/components/PeriodSelectList'
import PeriodEditDialog from '@/bank/views/business/limit/history/postloan/components/PeriodEditDialog'
import PeriodUploadConfirm from '@/bank/views/business/limit/history/postloan/components/PeriodUploadConfirm'
import PeriodViewDialog from '@/bank/views/business/limit/history/postloan/components/PeriodViewDialog'
export default {
  components: {
    SelectDateCascader,
    PeriodSelectList,
    PeriodEditDialog,
    PeriodUploadConfirm,
    PeriodViewDialog,
  },
  mixins: [hndTableMixin],
  props: {
    channelType: {
      type: String,
      default: '0',
    },
    isRuralDev: {
      type: String,
      default: '0',
    },
  },
  data() {
    return {
      enumPeriodStatus,
      enumCustomerType,
      loading: false,
      params: {
        index: 1,
        size: 10,
        customer_name: '',
      },
      order: {
        load_date: 'desc',
      },
      tableName: 'exh_period_xl_view',
      tableColumns: [
        { attrs: { label: '项目ID', prop: 'customer_related_id', align: 'center' } },
        {
          attrs: { label: '借款客户', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '客户类型', prop: 'org_class_name', align: 'center' } },
        { attrs: { label: '贷款金额(万元)', prop: 'warranty_amount', align: 'center' } },
        { attrs: { label: '在保余额(万元)', prop: 'left_funds', align: 'center' } },
        { attrs: { label: '放款日期', prop: 'loadDate', align: 'center', minWidth: '100px' } },
        { attrs: { label: '到期日期', prop: 'loadEndDate', align: 'center', minWidth: '100px' } },
        { attrs: { label: '银行名称', prop: 'bank_name', align: 'center', minWidth: '100px' } },
        { attrs: { label: '展期日期', prop: 'exhEndDate', align: 'center', minWidth: '100px' } },
        {
          attrs: { label: '展期金额(万元)', prop: 'exh_funds', align: 'center', width: '90px' },
        },
        {
          attrs: { label: '项目状态', prop: 'periodStatus', align: 'center' },
          process: (_, row) => ({ attrs: { class: `text-${row.periodStatusStyle}` } }),
        },
        {
          attrs: { label: '审批意见', prop: 'approval_option', minWidth: 120, align: 'left' },
        },
        {
          attrs: { label: '操作', align: 'center', width: '100px' },
          operations: [
            {
              content: '修改展期信息',
              icon: 'fa fa-edit',
              event: this.handlerEdit,
              ifRender: row => +(row.approval_status || '') === 4,
            },
            { content: '上传确认表', icon: 'fa fa-clipboard', event: this.hanleAttach },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handlerView,
            },
          ],
        },
      ],
      pickDateLoad: [],
      pickDateLoadEnd: [],
      tableData: [],
      tableCount: 0,

      periodListVisible: false,

      editVisible: false,
      formData: {},

      attachVisible: false,
      attachData: {},

      viewVisible: false,
      viewData: {},
    }
  },
  computed: {
    ...mapGetters(['clientId', 'userId']),
    isSubmit() {
      return this.user.scopes.includes('indoneBI')
    },
    nowDate() {
      return this.$utils.dateFormat(new Date(), 'yyyy-MM-dd')
    },
  },
  watch: {},
  created() {
    this.params['channel_type.eq'] = this.channelType
    this.params['is_rural_dev.eq'] = this.isRuralDev
    this.getData()
  },
  mounted() {},
  methods: {
    handlerView(row = {}) {
      this.viewVisible = true
      this.viewData = { ...row }
    },
    handlerEdit(row = {}) {
      this.formData = { ...row }
      this.editVisible = true
    },
    hanleAttach(row = {}) {
      this.attachVisible = true
      this.attachData = { ...row }
    },
    onPeriodList() {
      this.periodListVisible = true
    },
    handleDateLoadEndChange(val = []) {
      const [start, end] = parseCascaderDate(val)
      this.params['load_end_date.gte'] = start
      this.params['load_end_date.lte'] = end
      this.getData()
    },
    handleDateLoadChange(val = []) {
      const [start, end] = parseCascaderDate(val)
      this.params['load_date.gte'] = start
      this.params['load_date.lte'] = end
      this.getData()
    },
    handleSuccess() {
      this.$emit('success', true)
      this.getData()
    },

    dataAdapter(item) {
      item = dataAdapter(item)
      item.exhEndDate = this.$utils.dateFormat(item.exh_end_date, 'yyyy-MM-dd') || '-'

      item.periodStatus = enumPeriodStatus[item.approval_status || ''] || ''
      item.periodStatusStyle = enumPeriodStatusStyle[item.approval_status || ''] || ''

      return item
    },
  },
}
</script>

<style lang="scss" scoped></style>
